<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-monitor"></i>资源需求信息 </span>

            <el-button type="info" round >集中式资源分配</el-button>
            <el-button type="info" round>分布式资源分配</el-button>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">链点名称</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需资源</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">所需数量</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">预算输出</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业1</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.xx</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">车胎</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">100</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">2000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">300000</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">企业2</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">No.xx</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">车灯</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">200</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">锂电池</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">3000</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">100000</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-pie-chart"></i> 区域潜在领域分布</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div>
              <div id="mountNode"></div>
            </div>
            <div ref="commandstats" style="height: 420px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span><i class="el-icon-odometer"></i> 竞争企业资源的分布情况</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="usedmemory" style="height: 420px" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import G6 from '@antv/g6';

export default {
  mounted() {
    const data = {
      nodes: [
        {
          id: '0',
          label: '欧洲矿业',
          x: 100,
          y: 200
        },
        {
          id: '1',
          label: '澳洲力拓集团',
          x: 100,
          y: 400
        },
        {
          id: '2',
          label: '宁德时代',
          x: 300,
          y: 100
        },
        {
          id: '3',
          label: '潍柴动力',
          x: 300,
          y: 300
        },
        {
          id: '4',
          label: '派能科技',
          x: 300,
          y: 500
        },
        {
          id: '5',
          label: '理想汽车',
          x: 500,
          y: 200
        },
        {
          id: '6',
          label: '比亚迪',
          x: 500,
          y: 400
        },
        {
          id: '7',
          label: '湖南销售处',
          x: 700,
          y: 200
        },
        {
          id: '8',
          label: '广东销售处',
          x: 700,
          y: 400
        }
      ],
      edges: [
        // 内置弧线
        {
          id: 'edge0',
          source: '0',
          target: '2',
          label: '3000',
          curveOffset: 20
        },
        // 配置内置折线的弯折弧度、端点最小距离
        {
          id: 'edge1',
          source: '0',
          target: '3',
          label: '6000',
          curveOffset: 20
        },
        // // 带有 controlPoints，则按照给定控制点弯折
        {
          id: 'edge2',
          source: '1',
          target: '2',
          label: '8000',
          curveOffset: 20
        },
        {
          id: 'edge3',
          source: '1',
          target: '4',
          label: '5000',
          curveOffset: 20
        },
        {
          id: 'edge4',
          source: '2',
          target: '5',
          label: '6000',
          curveOffset: 20
        },
        {
          id: 'edge5',
          source: '2',
          target: '6',
          label: '4500',
          curveOffset: 20
        },
        {
          id: 'edge6',
          source: '3',
          target: '5',
          label: '6000',
          curveOffset: 20
        },
        {
          id: 'edge7',
          source: '3',
          target: '6',
          label: '2000',
          curveOffset: 20
        },
        {
          id: 'edge8',
          source: '4',
          target: '5',
          label: '3000',
          curveOffset: 20
        },
        {
          id: 'edge9',
          source: '5',
          target: '7',
          label: '4000',
          curveOffset: 1
        },
        {
          id: 'edge10',
          source: '6',
          target: '7',
          label: '5000',
          curveOffset: 20
        },
        {
          id: 'edge11',
          source: '6',
          target: '8',
          label: '6000',
          curveOffset: 1
        }
      ]
    };

    const graph = new G6.Graph({
      container: 'mountNode',
      width: window.innerWidth,
      height: window.innerHeight,
      linkCenter: true,
      defaultEdge: {
        shape: 'arc',
        labelCfg: {
          autoRotate: true,
          refY: -10
        }
      },
      modes: {
        // 支持的 behavior
        default: ['drag-node']
      }
    });

    graph.data(data);
    graph.render();
  }
};
</script>

